<template>
  <teleport to="body">
    <transition name="dialog">
      <div v-if="visible" class="dialog-overlay" @click="handleClose">
        <div class="dialog-container" @click.stop>
          <div class="dialog-header">
            <h3>OCR 识别结果</h3>
            <button class="close-btn" @click="handleClose">×</button>
          </div>

          <div class="dialog-body">
            <div class="result-info">
              <span class="confidence">置信度: {{ confidence.toFixed(2) }}%</span>
              <span class="word-count">字数: {{ text.length }}</span>
            </div>

            <div class="result-text-container">
              <textarea
                ref="textareaRef"
                v-model="editableText"
                class="result-text"
                :placeholder="text || '未识别到文字'"
              ></textarea>
              <div v-if="selectedText" class="selection-info">
                已选中 {{ selectedText.length }} 个字符
              </div>
            </div>
          </div>

          <div class="dialog-footer">
            <button class="btn btn-secondary" @click="handleSelectAll">
              全选
            </button>
            <button 
              class="btn btn-primary" 
              @click="handleCopy"
              :disabled="!editableText"
            >
              {{ copyButtonText }}
            </button>
            <button class="btn btn-secondary" @click="handleClose">
              关闭
            </button>
          </div>
        </div>
      </div>
    </transition>
  </teleport>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue'

interface Props {
  visible: boolean
  text: string
  confidence: number
}

const props = defineProps<Props>()

const emit = defineEmits<{
  close: []
  copy: [text: string]
}>()

const textareaRef = ref<HTMLTextAreaElement | null>(null)
const editableText = ref('')
const selectedText = ref('')

// 计算按钮文字
const copyButtonText = computed(() => {
  return selectedText.value ? '复制选中' : '复制全部'
})

watch(() => props.visible, (newVal) => {
  if (newVal) {
    editableText.value = props.text
    selectedText.value = ''
  }
})

watch(() => props.text, (newVal) => {
  editableText.value = newVal
})

const handleSelectAll = () => {
  if (textareaRef.value) {
    textareaRef.value.select()
    // 获取选中的文字
    const start = textareaRef.value.selectionStart
    const end = textareaRef.value.selectionEnd
    selectedText.value = editableText.value.substring(start, end)
  }
}

const handleCopy = async () => {
  // 实时获取选中文字
  let textToCopy = editableText.value
  
  if (textareaRef.value) {
    const start = textareaRef.value.selectionStart
    const end = textareaRef.value.selectionEnd
    if (start !== end) {
      textToCopy = editableText.value.substring(start, end)
      selectedText.value = textToCopy
    }
  }
  
  if (!textToCopy) {
    return
  }

  emit('copy', textToCopy)
}

const handleClose = () => {
  emit('close')
}
</script>

<style scoped>
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.dialog-container {
  background: white;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #eee;
}

.dialog-header h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  font-size: 28px;
  color: #999;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.close-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.dialog-body {
  flex: 1;
  padding: 20px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.result-info {
  display: flex;
  gap: 16px;
  font-size: 14px;
  color: #666;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.confidence {
  font-weight: 600;
  color: #4caf50;
}

.word-count {
  color: #999;
}

.result-text-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.result-text {
  flex: 1;
  width: 100%;
  min-height: 200px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.6;
  resize: vertical;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  color: #333;
}

.result-text:focus {
  outline: none;
  border-color: #00a8ff;
  box-shadow: 0 0 0 3px rgba(0, 168, 255, 0.1);
}

.result-text::placeholder {
  color: #ccc;
}

.selection-info {
  font-size: 12px;
  color: #00a8ff;
  padding: 4px 8px;
  background-color: #e3f2fd;
  border-radius: 4px;
  align-self: flex-start;
}

.dialog-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #eee;
  justify-content: flex-end;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-primary {
  background-color: #00a8ff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #0095e8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 168, 255, 0.3);
}

.btn-secondary {
  background-color: #f5f5f5;
  color: #666;
}

.btn-secondary:hover {
  background-color: #e0e0e0;
  color: #333;
}

/* 动画 - 优化性能 */
.dialog-enter-active,
.dialog-leave-active {
  transition: opacity 0.2s ease;
}

.dialog-enter-from,
.dialog-leave-to {
  opacity: 0;
}
</style>

